<!-- 左侧的导航栏 -->
<template>
  <div class="sidebar">
    <!-- 我的文件部分，带有折叠功能 -->
    <li class="list-group-item">
      <a
        href="#myFilesCollapse"
        @click.prevent="toggleFilesCollapse"
        class="nav-link"
        ><i class="bi bi-folder m-1"></i>
        我的文件
        <span v-if="isFilesCollapseExpanded"
          ><i class="bi bi-chevron-up m-1"></i
        ></span>
        <!-- 展开时显示向上箭头 -->
        <span v-else><i class="bi bi-chevron-down m-1"></i></span>
        <!-- 折叠时显示向下箭头 -->
      </a>
      <ul
        :class="{ collapse: true, show: isFilesCollapseExpanded }"
        id="myFilesCollapse"
      >
        <li class="list-group-item">
          <a href="#" class="nav-link"
            ><i class="bi bi-columns-gap m-1"></i>全部</a
          >
        </li>
        <li class="list-group-item">
          <a href="#" class="nav-link"><i class="bi bi-images m-1"></i>图片</a>
        </li>
        <li class="list-group-item">
          <a href="#" class="nav-link"
            ><i class="bi bi-file-word m-1"></i>文档</a
          >
        </li>
        <li class="list-group-item">
          <a href="#" class="nav-link"
            ><i class="bi bi-file-earmark-play m-1"></i>视频</a
          >
        </li>
        <li class="list-group-item">
          <a href="#" class="nav-link"><i class="bi bi-earbuds m-1"></i>音乐</a>
        </li>
        <li class="list-group-item">
          <a href="#" class="nav-link"><i class="bi bi-archive m-1"></i>其他</a>
        </li>
      </ul>
    </li>
    <!-- 其他列表项 -->
    <li class="list-group-item">
      <a href="#" class="nav-link"><i class="bi bi-trash m-1"></i>回收站</a>
    </li>
    <li class="list-group-item">
      <a href="#" class="nav-link"
        ><i class="bi bi-share-fill m-1"></i>我的分享</a
      >
    </li>
    <!-- 表示剩余存储空间 -->
    <div class="capacity">
      <div class="progress">
        <div
          class="progress-bar"
          role="progressbar"
          :style="{ width: usedPercentage + '%' }"
          :aria-valuenow="usedPercentage"
          aria-valuemin="0"
          aria-valuemax="100"
        >
          {{ usedPercentage }}%
        </div>
      </div>
      <div class="row">
        <div class="col-6 text-left">
          <p>存储</p>
        </div>
        <div class="col-6">{{ usedCapacity }}MB/{{ totalCapacity }}MB</div>
      </div>
      <button @click="increaseCapacity" class="button">增加容量</button>
      <button @click="decreaseCapacity" class="button">减少容量</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "LeftmenubarCompoent",
  data() {
    return {
      isFilesCollapseExpanded: false, // 侧边栏-跟踪“我的文件”折叠状态
      totalCapacity: 100, // 底部容量-文件夹总容量
      usedCapacity: 40, // 底部容量-已使用容量
    };
  },
  computed: {
    // 计算已使用容量的百分比
    usedPercentage() {
      return (this.usedCapacity / this.totalCapacity) * 100;
    },
    // 计算剩余容量
    remainingCapacity() {
      return this.totalCapacity - this.usedCapacity;
    },
  },
  methods: {
    // 折叠/展开“我的文件”部分
    toggleFilesCollapse() {
      this.isFilesCollapseExpanded = !this.isFilesCollapseExpanded;
    },

    // 底部容量-增加容量
    increaseCapacity() {
      if (this.usedCapacity < this.totalCapacity) {
        this.usedCapacity += 10; // 每次增加10MB
        if (this.usedCapacity > this.totalCapacity) {
          this.usedCapacity = this.totalCapacity;
        }
      }
    },
    // 底部容量-减少容量
    decreaseCapacity() {
      if (this.usedCapacity > 0) {
        this.usedCapacity -= 10; // 每次减少10MB
        if (this.usedCapacity < 0) {
          this.usedCapacity = 0;
        }
      }
    },
  },
};
</script>

<style scoped>
/* 侧边栏的样式，你可以根据Bootstrap的类名或自定义CSS来设置 */
.nav-link {
  /* 侧边栏字体大小 */
  font-size: 13px;
  font-weight: 500;
}
.sidebar {
  width: 200px; /* 举例宽度 */
  height: 90vh; /* 举例高度，占据整个视口高度 */
  background-color: #f8f9fa; /* 举例背景色 */
  position: relative;
  overflow-y: auto; /* 允许垂直滚动 */
  left: 0; /* 左侧定位 */
  top: 0; /* 顶部定位 */
  text-align: left;
}

.list-group-item a.nav-link {
  /* 链接的样式，可以使用Bootstrap的nav-link类或其他自定义样式 */
  color: #343a40; /* 举例文本颜色 */
  text-decoration: none; /* 去除下划线 */
  display: block; /* 作为块级元素显示 */
  padding: 0.75rem 1.25rem; /* 举例内边距 */
}

.collapse.list-group {
  margin-left: 10px; /* 缩进子列表以区分层级 */
  border-left: 1px dashed #ccc; /* 可选：添加左侧边框以增强视觉效果 */
}

/* 侧边栏容量大小样式 */
/* 让按钮失效，暂时不需要按钮 */
.button {
  display: none;
}

.capacity {
  left: 0; /* 左侧定位 */
  bottom: 5px; /* 底部定位 */
  position: absolute;
  font-size: 13px;
  font-weight: 500;
  width: 170px; /* 举例宽度 */
  margin: 0 10px;
}
.progress {
  /* 进度条高度 */
  height: 10px;
  margin-bottom: 5px;
}
</style>
